<template>
  <el-dialog
    v-model="dialogVisibled"
    title="选择系统"
    width="600"
    :style="{ height: '600px' }"
    :draggable="true"
    :before-close="handleClose"
    @open="handleDialogOpen"
  >
    <div style="display: flex; flex-direction: column; height: 530px">
      <div class="custom-divider-top"></div>
      <!-- <el-row class="rowNavStyle">
          <el-col :span="24" class="colNavStyle"> sdfasdfa </el-col>
        </el-row> -->
      <el-tree
        :data="systemList"
        default-expand-all
        :highlight-current="true"
        :expand-on-click-node="false"
        :check-strictly="true"
        :default-checked-keys="defaultSelectKey"
        @check="handleClick"
        show-checkbox
        node-key="value"
        ref="systemTree"
        :props="defaultProps"
      >
        <template #default="{ node, data }">
          <div class="custom-node">
            <el-icon color="#67C23A" v-if="data.disabled">
              <Histogram
            /></el-icon>
            <el-icon color="#67C23A" v-if="data.disabled === false">
              <Memo
            /></el-icon>
            <span>&nbsp;{{ node.label }}</span>
          </div>
        </template>
      </el-tree>
      <div style="margin-top: auto">
        <div class="custom-divider-bottom"></div>
        <div style="justify-content: right; align-items: right; display: flex">
          <el-button type="success" icon="Check" @click="confirmSelectClick">
            确认选择
          </el-button>
          <el-button type="danger" icon="Close" @click="handleClose"
            >关闭</el-button
          >
        </div>
      </div>
    </div>
  </el-dialog>
</template>
    
    <script lang="ts">
import { computed, defineComponent, ref } from "vue";
import pageLayout from "@/components/page.vue";
import { selectOutPut } from "@/model/public/selectModel";
import { getAllSystemSelect } from "@/api/system";
export default defineComponent({
  props: {
    isVisibles: {
      type: Boolean,
    },
    corporationKey: {
      type: String,
      required: true,
    },
    systemKey: {
      type: String,
      required: true,
    },
  },

  setup(props, context) {
    //系统树
    const systemTree = ref();
    //选中数据
    const selectData = ref<selectOutPut>();
    //默认选择节点
    const defaultSelectKey = ref<string[]>([]);
    //加载状态
    const loading = ref(true);
    //系统数据
    const systemList = ref<selectOutPut[]>([]);
    //打开时加载
    const handleDialogOpen = function () {
      defaultSelectKey.value = [];
      getAllSystemSelectMsg();
    };

    //tree指定操作
    const defaultProps = {
      children: "children",
      label: "label",
      key: "value",
    };

    //获取系统数据
    const getAllSystemSelectMsg = () => {
      getAllSystemSelect({ corporationKey: props.corporationKey }).then(
        ({ data, code }) => {
          if (code == 200) {
            systemList.value = data;
            defaultSelectKey.value.push(props.systemKey);
          }
        }
      );
    };

    //是否显示dialog
    const dialogVisibled = computed(() => {
      return props.isVisibles;
    });

    //关闭事件
    const handleClose = () => {
      context.emit("closeBnt");
    };

    //树点击事件
    function handleClick(node: selectOutPut, _checkedKey: any) {
      var selectKey = ref<string[]>([]);
      selectKey.value?.push(node.value);
      systemTree.value!.setCheckedKeys(selectKey.value);
      // departmentTree.value!.setCheckedKeys(checkedKey.checkedKeys);
      selectData.value = node;
    }

    //确认选择
    const model = ref({
      key: "",
      value: "",
    });
    const confirmSelectClick = function () {
      model.value.key = selectData.value?.value ?? "";
      model.value.value = selectData.value?.label ?? "";
      context.emit("confirmBnt", model.value);
    };
    return {
      handleClick,
      confirmSelectClick,
      handleDialogOpen,
      handleClose,
      loading,
      dialogVisibled,
      systemList,
      defaultSelectKey,
      defaultProps,
      systemTree,
    };
  },
  components: { pageLayout },
});
</script>
    <style scoped>
</style>